<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="_div">我是div</div>
    <div class="container">
      <div class="myclass">我是div111</div>
      <div class="myclass">我是div222</div>
    </div>
    <p>我是段落</p>
    <span>我是span</span>
    <script>
      //一.dom : d :document 文档  o : object : 对象   m : model 模型
      //m : model 模型  m : module : 模块
      //操作dom浏览器提供一个  全局的对象  document
      //window=>document=>html=>body

      //二.操作文档(document)
      /* 
      添加标签(tag)   (元素 element)
      修改或者替换元素
      删除元素
      查找元素,获取元素
      */
      //获取元素 : 第一步 获取元素  第二步,在获取元素的基础上再操作元素

      //1.获取元素
      //(1)通过id获取元素标签
      // var ele = document.getElementById("_div");

      // console.log(ele);

      //(2)通过类名获取元素标签
      // var ele = document.getElementsByClassName("myclass");

      //get: 获取   element:元素  by:通过  className: 类名
      // console.log(ele); //是一个伪数组 ,类数组
      // var arr = [1, 2]; //数组
      // console.log(arr);

      //(3)通过标签名获取元素
      // var ele = document.getElementsByTagName("div");
      // console.log(ele);

      //(4)改变获取的范围
      //获取的范围
      var containerEle = document.getElementsByClassName("container")[0];
      console.log(containerEle);
      var ele = containerEle.getElementsByTagName("div");
      console.log(ele);
    </script>
  </body>
</html>
